<div class="account block" data-title="我的账户" ms-controller="myAccount">
    <ms-tab ms-widget="{list: @tabList.list}"></ms-tab>
    <div class="accountInfoBlock">
        <p class="photo"></p>
        <h1 class="userName">
            {{@accountInfo.chineseName || ''}}
            {{@accountInfo.englishFirstName || ''}}
            {{@accountInfo.englishLastName || ''}}
        </h1>
        <p>国籍： {{@accountInfo.nationality || ''}}</p>
        <p>
            <span class="colCalf">证件类型：<i>{{@accountInfo.idDocument || ''}}</i></span>
            <span class="colCalf">证件号码：<i>{{@accountInfo.idDocumentNumber || ''}}</i></span>
        </p>
        <p class="tip">以上资料无法自助修改，如需修改请联系客服</p>
    </div>

    <!-- 交易账户 start -->
    <div class="tradeAccount mtop20">
        <h2 class="block_title">
            交易账户
            <span class="tip">您的名下共有{{@accountTab.list.length}}个<a href="#" class="primary">交易账户</a></span>
        </h2>
        <span class="registerTime" :visible="@accountTab.list[@accountTab.active].openAccountDate">
            注册时间：{{@accountTab.list[@accountTab.active].openAccountDate | date("yyyy-MM-dd HH:mm:ss")}}
        </span>
        <xmp is="ms-tab" ms-widget="{list: @accountTab.list, switchFn: @accountTab.switchFn,active:@accountTab.active}" :class="'accountTab'" ></xmp>
        <div :for="(index, el) in @accountTab.list" :visible="index==@accountTab.active" >
            <table cellpadding="0" cellspacing="0" width="100%" class="accountInfoTb"
                    :attr="{'data-active':@accountTab.active}" 
                    :visible="@el.accountNo" >
                <tr>
                    <td width="30%" align="right">账户：</td>
                    <td width="15%">{{@el.accountNo}}</td>
                    <td width="100" align="right">账户余额：</td>
                    <td>{{@el.currencyUnit}} {{@el.balance}}</td>
                </tr>
                <tr>
                    <td width="30%" align="right">账户币种：</td>
                    <td width="15%">{{@el.currencyName}}</td>
                    <td width="100" align="right">占用资金：</td>
                    <td>{{@el.currencyUnit}} {{@el.margin}}</td>
                </tr>
                <tr>
                    <td width="30%" align="right">级别：</td>
                    <td width="15%">{{@el.accountLevel}} <a href="javascript:;" class="btn">升级</a></td>
                    <td width="100" align="right">可用资金：</td>
                    <td>{{@el.currencyUnit}} {{@el.freemargin}}</td>
                </tr>
                <tr>
                    <td width="30%" align="right">状态：</td>
                    <td width="15%">{{@el.accountSatus}}</td>
                    <td width="100" align="right">可取资金：</td>
                    <td>{{@el.currencyUnit}} {{@el.withdrawableAmount}}</td>
                </tr>
            </table>
            <div class="btnBox" :visible="@el.accountNo">
                <a href="#" class="m-btn">存款</a>
                <a href="#" class="m-btn-default">取款</a>
            </div>
            <div class="enableAccount" :visible="!@el.accountNo">
                <button class="m-btn" :click="@enableAccount(@el, @index)">激活账号</button>
            </div>
        </div>
        
    </div>
    <!-- 交易账户 end -->

    <!-- 联系方式 start -->
    <div class="accountContact">
        <h2 class="block_title">联系方式</h2>
        <table cellpadding="0" cellspacing="0" width="100%">
                <tr>
                    <td width="100" align="right" valign="top">手提电话：</td>
                    <td>{{@accountInfo.mobilePhone}}</td>
                </tr>
                <tr>
                    <td width="100" align="right" valign="top">电邮地址<span class="showy">*</span>：</td>
                    <td>
                        <span>{{@accountInfo.email}}</span>
                        <a href="javascript:;" class="primary mleft10" :click="@emailDialog.display='block'">修改</a>
                        <p class="desc">（电子邮件可能作为您以后的用户名，用来管理您的账户、入金、更改资料以及接收资讯等，请确保资料的准确性并牢记您的电邮设置）</p>
                    </td>
                </tr>
                <tr>
                    <td width="100" align="right" valign="top">联络地址：</td>
                    <td> {{@accountInfo.address || '无'}} </td>
                </tr>
                <tr :if="@navShowArr.indexOf('weichatService')>-1">
                    <td width="100" align="right" valign="top">微信服务：</td>
                    <td>
                        <span :for="(k, v) in @weixinMap" class="weixinService">{{k}} ({{v ? '绑定':'未绑定'}}) </span>
                        <a href="#" class="primary mleft10" :if="!@isBinding">現在绑定</a>
                    </td>
                </tr>
            </table>
    </div>
    <!-- 联系方式 end -->

    <!-- 修改电子邮箱的弹窗 start-->
    <xmp is="ms-dialog" ms-widget="{dialog: @emailDialog}" >
        <div action="" class="emailModify" >
            <label>
                新邮箱：
                <input type="text" class="textInput" id="email" :duplex="@emailDialog.email" />
            </label>
            <p class="danger" >{{@emailDialog.emailError}}</p>
            <p class="emailTip">（电子邮件可能作为您以后的用户名，用来管理您的账户、入金、更改资料以及接收资讯等，请确保资料的准确性并牢记您的电邮设置）</p>
            <button class="m-btn mtop20" 
                    :click="@emailDialog.nextStep" 
                    :attr="{disabled:@emailDialog.loading}" 
                    :class="{loading:@emailDialog.loading}">
                        下一步
            </button>
        </div>
    </xmp>
    <!-- 修改电子邮箱的弹窗 end-->

    <!-- 激活账号的弹窗 -->
    <xmp is="ms-enable-account" ms-widget="{enableDialog: @enableDialog, accountList:@accountTab.list, unEnable:@unEnable, hasEnable:@hasEnable}"></xmp>
    
</div>